<template>
  <div>
    <el-popover
        v-model="option.popover"
        trigger="hover"
        placement="left-start"
        @hide="hideFn()"
    >
      <div style="text-align: center; margin: 0">
        <el-button
            size="mini"
            type="text"
            @click="fileFn(1,option)"
            v-if="previewStatus"
        >预览
        </el-button>
        <el-button
            type="primary"
            size="mini"
            @click="fileFn(2,option)"
        >{{option.src?'下载':'未找到下载链接'}}
        </el-button>
      </div>
      <el-link
          slot="reference"
          :underline="false"
          type="primary"
      >{{ option.name }}
      </el-link>
    </el-popover>
    <iframeDown :fileSrc="fileDown" v-if="showDownStatus"></iframeDown>
    <previewFile :visible.sync="previewVisible" :iframeSrc="iframeSrc"></previewFile>
    <div style="display: none">
      <viewer :images="studentPhoto" class="descimgBox">
          <img :src="studentPhoto[0]" class="viewerImg" ref="imgPrive" v-if="studentPhoto.length">
      </viewer>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  props: ['option'],
  name: "btn_file",
  data() {
    return {
      fileDown: '',
      previewVisible: false,
      iframeSrc: '',
      file_can_down:['zip','rar'],
      file_preview:['jpeg','png','jpg'],
      file_preview_can:['docx','doc','xlsx','xls', 'pdf','jpeg','png','jpg'],
      previewStatus: false,
      type_: '',
      studentPhoto: [],
      showDownStatus: false
    }
  },
  computed: {
    ...mapGetters(['configData']),
  },
  created() {
    this.fileSrc()
  },

  methods: {
    hideFn(){
      console.log(123)
      this.showDownStatus = false
    },
    fileSrc(){
      let val = this.option
      if(val && val.src){
        console.log('收到的值', val)
        let a = val.src.split('.')
        this.type_ = a[a.length-1]
        //判断是否可以预览
        if(this.file_preview_can.indexOf(this.type_)!==-1){
          this.previewStatus = true
        }
        this.studentPhoto.push(`${val.src}`)
      }
    },
    fileFn(index, option) {
      this.iframeSrc = ''
      this.fileDown = ''
      this.previewVisible = false
      this.showDownStatus = false
      if (index === 2) {
        console.log('下载连接:', this.configData)
        if(option.src.indexOf('.pdf')!==-1){
          window.open( `${this.configData.url}${option.src}`)
        }else{
          this.fileDown = option
          this.showDownStatus = true
        }
      } else {
        if(option.src.indexOf('.pdf')!==-1){
          window.open( `${this.configData.url}${option.src}`)
        }else{
          // 需要判断可预览文件内容
          if(this.file_preview.indexOf(this.type_)===-1){
            // 腾讯预览
            this.iframeSrc = option.src
            this.previewVisible = true
          }else{
            //图片预览
            this.$refs.imgPrive.click()
          }
        }

      }
    }
  }
}
</script>

<style scoped>

</style>
